<template>
  <div class="app-container">
    <!-- 订单进度区（带红色序号） -->
    <div class="section-group">
      <div class="section-header">
        订单进度
      </div>
      <el-steps :active="statusIndex" finish-status="success" class="order-steps">
        <el-step title="已下单">
          <template #description>
            <span class="step-time">{{ order.createdAt ? formatTime(order.createdAt, '{y}-{m}-{d} {h}:{i}') : '' }}</span>
          </template>
        </el-step>
        <!-- 已支付步骤：根据支付状态显示时间或“未支付” -->
           <el-step  title="已支付" :description="payTime ? formatTime(order.updatedAt, '{y}-{m}-{d} {h}:{i}') : '未支付'" />
        <el-step title="已执行" :description="finishTime ? formatTime(order.expectedServiceTime, '{y}-{m}-{d} {h}:{i}') : '未执行'" />
        <el-step title="已完成" :description="finishTime ? formatTime(order.expectedServiceTime, '{y}-{m}-{d} {h}:{i}') : '未完成'" />
      </el-steps>
    </div>

    <!-- 订单信息区（带红色序号） -->
    <div class="section-group mt-4">
      <div class="section-header">
        订单信息
      </div>
      <div class="info-container">
        <div class="info-row">
          <span class="info-label">订单编号</span>
          <span class="info-value">{{ order.bizOrderNo || '无' }}</span>
          <span class="info-label">期望服务时间</span>
          <span class="info-value">{{ formatTime(order.expectedServiceTime, '{y}-{m}-{d} {h}:{i}') || '无' }}</span>
        </div>
        <div class="info-row">
          <span class="info-label">老人姓名</span>
          <span class="info-value">{{ order. serviceElderId || '无' }}</span>
          <span class="info-label">床位号</span>
          <span class="info-value">{{ order.extend1 || '无' }}</span>
        </div>
        <div class="info-row">
          <span class="info-label">护理项目名称</span>
          <span class="info-value">{{ order.serviceItemId || '无' }}</span>
          <span class="info-label">订单金额</span>
          <span class="info-value">{{ order.amount ? order.amount + ' 元' : '0.00 元' }}</span>
        </div>
        <div class="info-row">
          <span class="info-label">下单人</span>
          <span class="info-value">{{ order.customerId || '无' }}</span>
          <span class="info-label">下单人手机号</span>
          <span class="info-value">{{ order.extend2 || '无' }}</span>
        </div>
        <div class="info-row">
          <span class="info-label">备注</span>
          <span class="info-value">{{ order.remark || '无' }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { getOrder } from '@/api/greenold-order/order'; // 替换为实际接口路径
import { formatTime } from '@/utils/date'; // 若依时间格式化工具

const route = useRoute();
const order = ref({}); // 存储订单详情数据
const statusIndex = ref(0); // 步骤条激活索引



// / 计算步骤条激活索引（核心修复逻辑）
const calculateStatusIndex = () => {
  const { orderStatus, payStatus } = order.value;
  // 处理已关闭
  if (orderStatus === "4") {
      return 0;
  }else if(orderStatus === "5"){
    return 0;
  }
  // 正常状态映射
  const statusMap = {
    "0": 0, // 待支付 → 已下单
    "1": 2, // 待执行 → 已支付
    "2": 3, // 已执行 → 已执行
    "3": 4  // 已完成 → 已完成
  };
  
  // 默认返回0（未知状态）
  return statusMap[orderStatus] || 0;
};
// 页面加载时获取订单详情
onMounted(() => {
  const id = route.query.id;
  if (id) {
    getOrder(id).then(res => {
      order.value = res.data;
 if (res.code === 200) {
          order.value = res.data;
          // 设置步骤条激活索引（修复核心）
          statusIndex.value = calculateStatusIndex();
        } else {
          ElMessage.error(res.msg || '获取订单详情失败');
        }
    }).catch(() => {
        ElMessage.error('网络异常，无法获取订单详情');
      });
  } else {
    ElMessage.error('缺少订单ID参数');
  }
});

// 计算订单是否已支付
const payTime = computed(() => {
  // 假设 payStatus 为 2 时表示已支付（与后端状态值保持一致）
  return order.value.payStatus === "1"; 
});
const executeTime = computed(() => {
  // 假设 executeStatus 为 2 时表示已执行（与后端状态值保持一致）
  return order.value.orderStatus === "2"; 
});
const finishTime = computed(() => {
  // 假设 finishStatus 为 2 时表示已完成（与后端状态值保持一致）
  return order.value.orderStatus === "3"; 
});


</script>

<style scoped>
.app-container {
  padding: 20px;
  background-color: #fff;
}

/* 章节头部（带红色圆形序号） */
.section-group {
  margin-bottom: 20px;
}

.section-header {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 12px;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #ff4d4f;
  color: #fff;
  font-size: 14px;
  margin-right: 8px;
}

/* 步骤条样式（匹配蓝色激活态） */
.order-steps {
  padding-left: 20px;
}

:deep(.el-steps .el-step.is-active .el-step__head) {
  background-color: #128afa; /* 激活步骤蓝色 */
  border-color: #1890ff;
}
:deep(.el-steps .el-step.is-active .el-step__title) {
  color: #1890ff;
  font-weight: bold;
}
:deep(.el-steps .el-step:not(.is-active) .el-step__head) {
  background-color: #fff;
  border-color: #d9d9d9;
}
:deep(.el-steps .el-step:not(.is-active) .el-step__title) {
  color: #999;
}
:deep(.el-steps .el-step__description) {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}



/* 订单信息布局 */
.info-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-row {
  display: flex;
  align-items: center;
}

.info-label {
  width: 120px;
  color: #666;
  text-align: right;
  margin-right: 16px;
}

.info-value {
  flex: 1;
  color: #333;
}
</style>